<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2021/7/23
  Time: 15:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="static/css/animate.min.css" rel="stylesheet">
    <link href="static/css/myAlert.css" rel="stylesheet">
    <link href="static/css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">
    <style type="text/css">
        button{float: right}
        span{font-size: 10px}
        th{align-content: center}
        .col-sm-8{
            width: 400px;
        }
        .update{
            margin-left: 25%;
        }
        .ibox-content{
            width: 700px;
            box-shadow: 2px 2px 5px #bababa;
        }
        .subrole{
            margin-bottom: 0px;
        }
    </style>
</head>
<body>
<%--列表--%>
<div style="width: 60%;margin-left: 20%;margin-top: 10%" class="alluser">
    <h2 style="text-align: center ;color: #07c227">用户列表</h2>
    <table class="table table-hover" >
        <thead>
        <tr >
            <th>id</th>
            <th>姓名</th>
            <th>账号</th>
            <th>密码</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody class="first">
        </tbody>
    </table>
    第<span id="spanPageNum"></span>页/共<span id="spanTotalPage"></span>页
    <button type="button" class="btn btn-outline btn-primary increase">下一页</button>
    <button type="button" class="btn btn-outline btn-primary reduce">上一页</button>
</div>
<%--修改信息--%>
<div class="ibox-content updatemsg" style="margin-left: 20%;margin-top: 10%">
    <form class="form-horizontal" action="updateUserById" method="post">
        <h2 class="showid">修改信息</h2>
        <div class="form-group">
            <input type="hidden" class="newmsg" name="uid">
            <label class="col-sm-3 control-label">用户名：</label>
            <div class="col-sm-8">
                <input type="text" placeholder="用户名" class="form-control uname" name="uname">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">密码：</label>
            <div class="col-sm-8">
                <input type="password" placeholder="密码" class="form-control upsw" name="upsw">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">电话：</label>
            <div class="col-sm-8">
                <input type="text" placeholder="电话" class="form-control uphone" name="uphone">
            </div>
        </div>
        <input type="submit" class="btn btn-outline btn-success update no showal" value="确认修改"/>
                <input type="button" class="btn btn-outline btn-info no" value="取消修改"/>
    </form>
</div>
<%--划分角色--%>
<div class="ibox-content addrole" style="margin-left: 20%;margin-top: 10%">
    <form class="form-horizontal" action="addRoleToUser">
        <h3>添加角色</h3>
        <input type="hidden"  name="uid" class="addrole-uid">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th></th>
            <th>id</th>
            <th>角色名称</th>
        </tr>
        </thead>
        <tbody class="rolesck">
        </tbody>
    </table>
        <button type="submit" class="btn btn-w-m btn-success norole showal">确认添加</button>
        <button type="button" class="btn btn-w-m btn-default norole">取消添加</button>
    </form>
</div>
<script src="static/js/jquery.min.js?v=2.1.4"></script>
<script src="static/js/bootstrap.min.js?v=3.3.5"></script>
<script src="static/js/plugins/iCheck/icheck.min.js"></script>
<script src="static/js/myAlert.js"></script>
<script src="static/js/jquery.form.min.js"></script>
<script>
    $(function (){
        $(".updatemsg").hide();
        $(".addrole").hide();
        $("#spanPageNum").html(1);
        var pageSize;
        //查询一页数据
        $.ajax({
            url:"findAllUser",
            method:"post",
            data:{page:1},
            dataType:"json",
            success:function (data){
                let phone;
              for(let u=0;u<data.length;u++){
                  if (data[u].usphone==null){ phone='暂未添加'}else {phone=data[u].usphone}
                    $(".first").append(" <tr><td id='uid'>"+data[u].usid+"</td><td id='uname'>"+data[u].usname+"</td><td>"+data[u].usaccount+"</td><td id='upsw'>"+data[u].uspsw+"</td>" +
                        " <td id='uphone'>"+phone+"</td> " +
                        "<td><input type='button' class='btn btn-outline btn-info' value='修改信息'/>" +
                  "<input type='button' class='btn btn-outline btn-warning' value='分配角色'/>" +
                        "<input type='button' class='btn btn-outline btn-danger'value='删除'/>" +
                  "</td> </tr>" +
                        "</td></tr>")
                  //修改信息
                  $(".btn-info").click(function (){
                    let usid= $(this).parents("tr").find("#uid").text()
                      let uname= $(this).parents("tr").find("#uname").text()
                      let upsw= $(this).parents("tr").find("#upsw").text()
                      let uphone= $(this).parents("tr").find("#uphone").text()
                      $(".alluser").hide();
                      $(".updatemsg").show();
                      $(".newmsg").val(usid);$(".uname").val(uname);$(".upsw").val(upsw);$(".uphone").val(uphone);
                  })
                  //取消修改
                  $(".no").click(function (){
                      $(".alluser").show();
                      $(".updatemsg").hide();
                  })
                  //划分角色
                  $(".btn-warning").click(function (){
                      let uid= $(this).parents("tr").find("#uid").text()
                      $(".alluser").hide();
                      $(".addrole").show();
                      $.ajax({
                          url:"findRoleNoUid",
                          type:"post",
                          dataType:"json",
                          data:{uid:uid},
                          success:function (data){
                              $(".rolesck").html('');
                              for (var i=0;i<data.length;i++){
                                  $(".rolesck").append("   <tr> <td><input type='checkbox' name='roles' value='"+data[i].rid+"'></td> <td id='rid'>"+data[i].rid+"</td><td>"+data[i].rname+"</td></tr>")
                              }
                          }
                      })
                      let usid= $(this).parents("tr").find("#uid").text()
                      $(".addrole-uid").val(usid)
                  })
                  //取消划分角色
                  $(".norole").click(function (){
                      $(".alluser").show();
                      $(".addrole").hide();
                  })
                  //删除用户
                  $(".btn-danger").click(function (){
                      let duid= $(this).parents("tr").find("#uid").text()
                      $.ajax({
                          url:"deleteUser",
                          method:"post",
                          data:{duid:duid},
                          success:function (){
                              alert("删除成功，请刷新页面")
                          },
                          error:function (){
                              window.location.herf="404.jsp"
                          }
                      })
                  })
                  //阻止form表单跳转
                  $(".form-horizontal").submit(function (){
                      $(this).ajaxSubmit()
                      return false;
                  })
                  //弹窗
                  var malert= {
                      title: "Tip",
                      msg: "操作成功",
                  }
                  $(".showal").click(function (){
                      MyAlert(malert);
                  })
                }
            },
            error:function (){
                 window.location.herf="404.jsp"
            },
        })
        //查询总页数
        $.ajax({
            url:"getUserPages",
            method:"post",
            success:function (data){
                pageSize=data;
                $("#spanTotalPage").html(pageSize);
            },
            error:function (){
               window.location.herf="404.jsp"
            }
        })
        //下一页
        $(".increase").click(function (){
            let oldPage=parseInt($("#spanPageNum").text());
            if (oldPage<pageSize){
                let newPage=oldPage+1;
                $("#spanPageNum").html(newPage);
                $.ajax({
                    url:"findAllUser",
                    method:"post",
                    data:{page:newPage},
                    dataType:"json",
                    success:function (data){
                        $(".first").html("");
                        let phone;
                        for(let u=0;u<data.length;u++){
                            if (data[u].usphone==null){ phone='暂未添加'}else {phone=data[u].usphone}
                            $(".first").append(" <tr><td id='uid'>"+data[u].usid+"</td><td>"+data[u].usname+"</td><td>"+data[u].usaccount+"</td> <td>"+data[u].uspsw+"</td> <td>"+phone+"</td>" +
                                "<td><input type='button' class='btn btn-outline btn-danger' value='删除'/>" +
                                "<input type='button' class='btn btn-outline btn-warning' value='分配角色'/>" +
                                "<input type='button' class='btn btn-outline btn-info' value='修改信息'/></td> </tr>")
                        }
                        //修改信息
                        $(".btn-info").click(function (){
                            let usid= $(this).parents("tr").find("#uid").text()
                            let uname= $(this).parents("tr").find("#uname").text()
                            let upsw= $(this).parents("tr").find("#upsw").text()
                            let uphone= $(this).parents("tr").find("#uphone").text()
                            $(".alluser").hide();
                            $(".updatemsg").show();
                            $(".newmsg").val(usid);$(".uname").val(uname);$(".upsw").val(upsw);$(".uphone").val(uphone);
                        })
                        //取消修改
                        $(".no").click(function (){
                            $(".alluser").show();
                            $(".updatemsg").hide();
                        })
                        //划分角色
                        $(".btn-warning").click(function (){
                            let uid= $(this).parents("tr").find("#uid").text()
                            $(".alluser").hide();
                            $(".addrole").show();
                            $.ajax({
                                url:"findRoleNoUid",
                                type:"post",
                                dataType:"json",
                                data:{uid:uid},
                                success:function (data){
                                    $(".rolesck").html('');
                                    for (var i=0;i<data.length;i++){
                                        $(".rolesck").append("   <tr> <td><input type='checkbox' name='roles' value='"+data[i].rid+"'></td> <td id='rid'>"+data[i].rid+"</td><td>"+data[i].rname+"</td></tr>")
                                    }
                                }
                            })
                            let usid= $(this).parents("tr").find("#uid").text()
                            $(".addrole-uid").val(usid)
                        })
                        //取消划分角色
                        $(".norole").click(function (){
                            $(".alluser").show();
                            $(".addrole").hide();
                        })
                        //删除用户
                        $(".btn-danger").click(function (){
                            let duid= $(this).parents("tr").find("#uid").text()
                            $.ajax({
                                url:"deleteUser",
                                method:"post",
                                data:{duid:duid},
                                success:function (){
                                    alert("删除成功，请刷新页面")
                                },
                                error:function (){
                                    window.location.herf="404.jsp"
                                }
                            })
                        })
                        //阻止form表单跳转
                        $(".form-horizontal").submit(function (){
                            $(this).ajaxSubmit()
                            return false;
                        })
                        //弹窗
                        var malert= {
                            title: "Tip",
                            msg: "操作成功",
                        }
                        $(".showal").click(function (){
                            MyAlert(malert);
                        })
                    },
                    error:function (){
                        window.location.herf="404.jsp"
                    },
                })
            }
        })
        //上一页
        $(".reduce").click(function (){
            let oldPage=parseInt($("#spanPageNum").text());
            if (oldPage>1){
                let newPage=oldPage-1;
                $("#spanPageNum").html(newPage);
                $.ajax({
                    url:"findAllUser",
                    method:"post",
                    data:{page:newPage},
                    dataType:"json",
                    success:function (data){
                        $(".first").html("")
                        let phone;
                        for(let u=0;u<data.length;u++){
                            if (data[u].usphone==null){ phone='暂未添加'}else {phone=data[u].usphone}
                            $(".first").append(" <tr><td id='uid'>"+data[u].usid+"</td><td>"+data[u].usname+"</td><td>"+data[u].usaccount+"</td> <td>"+data[u].uspsw+"</td> <td>"+phone+"</td> " +
                                "<td><button type='button' class='btn btn-outline btn-danger'>删除</button>" +
                                "<button type='button' class='btn btn-outline btn-warning'>分配角色</button>" +
                                "<button type='button' class='btn btn-outline btn-info'>修改信息</button></td> </tr>")
                        }
                        //修改信息
                        $(".btn-info").click(function (){
                            let usid= $(this).parents("tr").find("#uid").text()
                            let uname= $(this).parents("tr").find("#uname").text()
                            let upsw= $(this).parents("tr").find("#upsw").text()
                            let uphone= $(this).parents("tr").find("#uphone").text()
                            $(".alluser").hide();
                            $(".updatemsg").show();
                            $(".newmsg").val(usid);$(".uname").val(uname);$(".upsw").val(upsw);$(".uphone").val(uphone);
                        })
                        //取消修改
                        $(".no").click(function (){
                            $(".alluser").show();
                            $(".updatemsg").hide();
                        })
                        //划分角色
                        $(".btn-warning").click(function (){
                            let uid= $(this).parents("tr").find("#uid").text()
                            $(".alluser").hide();
                            $(".addrole").show();
                            $.ajax({
                                url:"findRoleNoUid",
                                type:"post",
                                dataType:"json",
                                data:{uid:uid},
                                success:function (data){
                                    $(".rolesck").html('');
                                    for (var i=0;i<data.length;i++){
                                        $(".rolesck").append("   <tr> <td><input type='checkbox' name='roles' value='"+data[i].rid+"'></td> <td id='rid'>"+data[i].rid+"</td><td>"+data[i].rname+"</td></tr>")
                                    }
                                }
                            })
                            let usid= $(this).parents("tr").find("#uid").text()
                            $(".addrole-uid").val(usid)
                        })
                        //取消划分角色
                        $(".norole").click(function (){
                            $(".alluser").show();
                            $(".addrole").hide();
                        })
                        //删除用户
                        $(".btn-danger").click(function (){
                            let duid= $(this).parents("tr").find("#uid").text()
                            $.ajax({
                                url:"deleteUser",
                                method:"post",
                                data:{duid:duid},
                                success:function (){
                                    alert("删除成功，请刷新页面")
                                },
                                error:function (){
                                    window.location.herf="404.jsp"
                                }
                            })
                        })
                        //阻止form表单跳转
                        $(".form-horizontal").submit(function (){
                            $(this).ajaxSubmit()
                            return false;
                        })
                        //弹窗
                        var malert= {
                            title: "Tip",
                            msg: "操作成功",
                        }
                        $(".showal").click(function (){
                            MyAlert(malert);
                        })
                    },
                    error:function (){
                        window.location.herf="404.jsp"
                    },
                })
            }
        })
    })
</script>
</body>
</html>
